<style>
    .twoDiv {
        padding: 10px 0px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        height: 120px;
    }

    .three {
        height: 400px;
        padding: 10px 0px;
    }
</style>

<form class="layui-form" action="#" lay-filter="example">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">数据概览</div>
                            <div class="layui-card-body">
                                <div class="twoDiv ">
                                    <div class="layui-form-item">
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">托运单号</label>
                                            <div class="layui-input-block">
                                                <input type="tel" id="waybill_id" name="waybillId" autocomplete="on" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md4">
                                            <label class="layui-form-label">到达分站</label>
                                            <div class="layui-input-block">
                                                <select name="substationunit" id="substationUnit">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md4">
                                            <label class="layui-form-label">运输类型</label>
                                            <div class="layui-input-block">
                                                <select name="typetransportation" id="typetransportation">
                                                    <option value="普通运输">普通运输</option>
                                                    <option value="加急卡班">加急卡班</option>
                                                    <option value="整车运输">整车运输</option>
                                                    <option value="航空运输">航空运输</option>
                                                    <option value="铁路运输">铁路运输</option>
                                                    <option value="冷链运输">冷链运输</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">起止日期</label>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="date" name="datearrival" id="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline" style="width: 100px;">
                                                <input type="date" name="consigndate" id="date1" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <div class="layui-input-block">
                                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">立即提交</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="three">
                                    <table id="one" lay-filter="one"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">数据概览</div>
                            <div class="layui-card-body">
                                <div class="twoDiv ">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">托运单号</label>
                                            <div class="layui-input-block">
                                                <input type="tel" id="waybill_id2" name="waybillId" autocomplete="on" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">运输类型</label>
                                            <div class="layui-input-block">
                                                <select name="typetransportation" id="typetransportation1">
                                                    <option value="普通运输">普通运输</option>
                                                    <option value="加急卡班">加急卡班</option>
                                                    <option value="整车运输">整车运输</option>
                                                    <option value="航空运输">航空运输</option>
                                                    <option value="铁路运输">铁路运输</option>
                                                    <option value="冷链运输">冷链运输</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" >
                                            <button type="submit" style="float: right;margin-right: 50px" class="layui-btn" lay-submit="" lay-filter="demo2">立即提交</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="three">
                                    <table id="two" lay-filter="two"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <table id="three" lay-filter="three"></table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<!--第一个表-->
<script type="text/html" id="toolbarRole">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="addRole">添加待卸货</button>
    </div>
</script>
<!--第二个表-->
<script type="text/html" id="twotbale">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="baocun">卸货完毕</button>
        <button class="layui-btn layui-btn-sm"  type="button" lay-event="qianshou">直接签收</button>
    </div>
</script>
<script>
    layui.use(['table', 'form', 'jquery', 'layer', 'tree', 'util'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate,
            table = layui.table;
        var $ = layui.jquery;
        form.render();
        $.ajax({
            url: "../../getAllSubstation",
            type: "post",
            data: {},
            dataType: "json",
            success: function (data) {
                //动态添加下拉框
                for (var i = 0; i < data.length; i++) {
                    $("#substationUnit").append("<option value='" + data[i].subId + "'>" + data[i].subName + "</option>");
                }
                //刷新
                form.render('select');
            }
        })

        //第一表
        table.render({
            elem: '#one'
            ,id:"yi"
            ,height: 400
            ,url: '../../getLoadingBYStateOneShuntController' //数据接口
            ,toolbar: '#toolbarRole' //开启头部工具栏，并为其绑定左侧模板
            ,limit:5
            ,limits:[5,10,15,20]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'waybillId', title: '运单号', sort: true,width:220}
                ,{field: 'substationunit', title: '到达分站id',width:120}
                ,{field: 'freightinformation', title: '货物信息id',width:120}
                ,{field: 'consigndate', title: '托运日期',width:120}
                ,{field: 'typetransportation', title: '运输类型',width:120}
                ,{field: 'modetransport', title: '运输方式',width:120}
                ,{field: 'datearrival', title: '承诺日期',width:120}
                ,{field: 'descriptiongoods', title: '货物名称',width:120}
                ,{field: 'packaging', title: '包装方式',width:120}
                ,{field: 'quantity', title: '货物数量',width:120}
                ,{field: 'weight', title: '重量kg',width:120}
                ,{field: 'volume', title: '体积m3立方米',width:120}
                ,{field: 'unitprice', title: '货物单价',width:120}
                ,{field: 'tollcollectionmanner', title: '收费方式',width:120}
                ,{field: 'picupcharge', title: '提货费',width:120}
                ,{field: 'deliveryfee', title: '送货费',width:120}
                ,{field: 'cargovalue', title: '货物价值',width:120}
                ,{field: 'premium', title: '保价费用',width:120}
                ,{field: 'unloadfee', title: '卸货费',width:120}
                ,{field: 'elsefee', title: '其它费用',width:120}
                ,{field: 'rebate', title: '返利代收',width:120}
                ,{field: 'aggregateamount', title: '应收总金额',width:120}
                ,{field: 'paymentmethod', title: '付款方式',width:120}
                ,{field: 'nowclosed', title: '现收',width:120}
                ,{field: 'cost', title: '基本运费',width:120}
                ,{field: 'remark', title: '备注',width:120}
            ]]
        });
        //第二个表
        table.render({
            elem: '#two'
            ,id:"two"
            ,height: 400
            ,url: '../../getLoadingBYStateTwoShuntController' //数据接口
            ,toolbar: '#twotbale' //开启头部工具栏，并为其绑定左侧模板
            ,limit:5
            ,limits:[5,10,15,20]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'waybillId', title: '运单号', sort: true,width:220}
                ,{field: 'substationunit', title: '到达分站id',width:120}
                ,{field: 'freightinformation', title: '货物信息id',width:120}
                ,{field: 'consigndate', title: '托运日期',width:120}
                ,{field: 'typetransportation', title: '运输类型',width:120}
                ,{field: 'modetransport', title: '运输方式',width:120}
                ,{field: 'datearrival', title: '承诺日期',width:120}
                ,{field: 'descriptiongoods', title: '货物名称',width:120}
                ,{field: 'packaging', title: '包装方式',width:120}
                ,{field: 'quantity', title: '货物数量',width:120}
                ,{field: 'weight', title: '重量kg',width:120}
                ,{field: 'volume', title: '体积m3立方米',width:120}
                ,{field: 'unitprice', title: '货物单价',width:120}
                ,{field: 'tollcollectionmanner', title: '收费方式',width:120}
                ,{field: 'picupcharge', title: '提货费',width:120}
                ,{field: 'deliveryfee', title: '送货费',width:120}
                ,{field: 'cargovalue', title: '货物价值',width:120}
                ,{field: 'premium', title: '保价费用',width:120}
                ,{field: 'unloadfee', title: '卸货费',width:120}
                ,{field: 'elsefee', title: '其它费用',width:120}
                ,{field: 'rebate', title: '返利代收',width:120}
                ,{field: 'aggregateamount', title: '应收总金额',width:120}
                ,{field: 'paymentmethod', title: '付款方式',width:120}
                ,{field: 'nowclosed', title: '现收',width:120}
                ,{field: 'cost', title: '基本运费',width:120}
                ,{field: 'remark', title: '备注',width:120}
            ]]
        });
        //第三个表
        table.render({
            elem: '#three'
            ,id:"there"
            ,height: 500
            ,url: '../../getLoadingBYStateThreeShuntController' //数据接口
            ,toolbar: '#threebale' //开启头部工具栏，并为其绑定左侧模板
            ,limit:5
            ,limits:[5,10,15,20]
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'waybillId', title: '运单号', sort: true,width:220}
                ,{field: 'substationunit', title: '到达分站id',width:120}
                ,{field: 'freightinformation', title: '货物信息id',width:120}
                ,{field: 'consigndate', title: '托运日期',width:120}
                ,{field: 'typetransportation', title: '运输类型',width:120}
                ,{field: 'modetransport', title: '运输方式',width:120}
                ,{field: 'datearrival', title: '承诺日期',width:120}
                ,{field: 'descriptiongoods', title: '货物名称',width:120}
                ,{field: 'packaging', title: '包装方式',width:120}
                ,{field: 'quantity', title: '货物数量',width:120}
                ,{field: 'weight', title: '重量kg',width:120}
                ,{field: 'volume', title: '体积m3立方米',width:120}
                ,{field: 'unitprice', title: '货物单价',width:120}
                ,{field: 'tollcollectionmanner', title: '收费方式',width:120}
                ,{field: 'picupcharge', title: '提货费',width:120}
                ,{field: 'deliveryfee', title: '送货费',width:120}
                ,{field: 'cargovalue', title: '货物价值',width:120}
                ,{field: 'premium', title: '保价费用',width:120}
                ,{field: 'unloadfee', title: '卸货费',width:120}
                ,{field: 'elsefee', title: '其它费用',width:120}
                ,{field: 'rebate', title: '返利代收',width:120}
                ,{field: 'aggregateamount', title: '应收总金额',width:120}
                ,{field: 'paymentmethod', title: '付款方式',width:120}
                ,{field: 'nowclosed', title: '现收',width:120}
                ,{field: 'cost', title: '基本运费',width:120}
                ,{field: 'remark', title: '备注',width:120}
            ]]
        });

        //第一个表的头部事件
        table.on('toolbar(one)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            //判断是否选中了
            if (checkStatus.data.length==0){
                alert("请选择一行选中")
            }else {
                switch(obj.event){
                    case 'addRole':
                        var data = checkStatus.data;
                        var k="";
                        for (var i=0;i<data.length-1;i++){
                            k+=data[i].waybillId+"-"
                        }
                        k+=data[data.length-1].waybillId
                        //多条修改
                        $.ajax({
                            url: "../../ModificationOneShuntController",
                            type: "post",
                            data: {
                                strings:k
                            },
                            dataType: "text",
                            success: function (data) {
                                //上述方法等价于
                                table.reload('yi');
                                //上述方法等价于
                                table.reload('two');
                            }
                        })
                        break;
                };
            }
        });


        //第二个表的
        table.on('toolbar(two)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            //判断是否选中了
            if (checkStatus.data.length==0){
                alert("请选择一行选中")
            }else {
                switch(obj.event){
                    case 'baocun':
                        var data = checkStatus.data;
                        var k="";
                        for (var i=0;i<data.length-1;i++){
                            k+=data[i].waybillId+"-"
                        }
                        k+=data[data.length-1].waybillId
                        //多条修改
                        $.ajax({
                            url: "../../upteModificationTwoShuntController",
                            type: "post",
                            data: {
                                strings:k
                            },
                            dataType: "text",
                            success: function (data) {
                                //上述方法等价于
                                table.reload('there');
                                //上述方法等价于
                                table.reload('two');
                            }
                        })
                        break;
                    case 'qingchu':
                        var data = checkStatus.data;
                        var k="";
                        for (var i=0;i<data.length-1;i++){
                            k+=data[i].waybillId+"-"
                        }
                        k+=data[data.length-1].waybillId
                        //多条修改
                        $.ajax({
                            url: "../../upteModificationThreeShuntController",
                            type: "post",
                            data: {
                                strings:k
                            },
                            dataType: "text",
                            success: function (data) {
                                //上述方法等价于
                                table.reload('yi');
                                //上述方法等价于
                                table.reload('two');
                            }
                        })
                };
            }
        });

        //第三个表
        table.on('toolbar(three)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            //判断是否选中了
            if (checkStatus.data.length == 0) {
                alert("请选择一行选中")
            }else {
                switch(obj.event) {
                    case 'chongxin':
                        var data = checkStatus.data;
                        var k="";
                        for (var i=0;i<data.length-1;i++){
                            k+=data[i].waybillId+"-"
                        }
                        k+=data[data.length-1].waybillId
                        //多条修改
                        $.ajax({
                            url: "../../ModificationOne",
                            type: "post",
                            data: {
                                strings:k
                            },
                            dataType: "text",
                            success: function (data) {
                                //上述方法等价于
                                table.reload('two');
                                //上述方法等价于
                                table.reload('there');
                            }
                        })
                        break;
                    case 'addxieyi':
                        var data = checkStatus.data;
                        if (data.length==1){
                            $.ajax({
                                url: "../../../../getWaybill_idAndFreightInformation",
                                type: "post",
                                data: {
                                    waybill_id:data[0].waybillId,
                                    freightInformation:data[0].freightinformation
                                },
                                dataType: "text",
                                success: function (data) {
                                    popups()
                                }
                            })
                            break;
                        }else {
                            alert("只能选中一行以及没有选中")
                        }
                        break;
                };
            }
        })



        //高级查询(第一个表单事件)
        //监听提交
        form.on('submit(demo2)', function(data){
            //执行重载
            table.reload('yi', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                //根据条件查询
                ,where: {
                    waybill_id:$("#waybill_id").val(),
                    substationUnit:$('#substationUnit option:selected').val(),
                    modeTransport:$('#typetransportation option:selected').val(),
                    startDate:$("#date").val(),
                    endingDate:$("#date1").val(),
                    id:"1"
                }
            });
            return false;
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            //执行重载
            table.reload('two', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                //根据条件查询
                ,where: {
                    waybill_id:$("#waybill_id2").val(),
                    modeTransport:$('#typetransportation1 option:selected').val(),
                    id:"1"
                }
            });
            return false;
        });

    });
    //编辑的弹出层
    function popups() {
        layui.use(['layer', 'table', 'jquery'], function () {
            var layer = layui.layer;
            layer.open({
                //弹出hmtl页面层
                type: 1,
                //内容：地址
                content: '<iframe src="/src/views/transportation/iframe/addprotocol.html" id="iframes" frameborder="0" width="100%" height="100%" scrolling="no" ></iframe>',
                //大小
                area: ['1150px', '500px'],
                //背景透明度
                shade: [0.8, '#393D49'],

            });

        })
    }
</script>


